<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" @Launchform="Launchform" />

    <div style="margin-top: 15px">
      <el-card shadow="never" :body-style="{ padding: '12px 10px 12px' }">
        <div slot="header" class="mb9 f16">
          <h1 style="font-weight: 600">{{ $t(`Print.WarehousingInquiryOfPackagingMaterials`) }}</h1>
        </div>
        <Table
          :summaryData="summaryData"
          summary
          :tableData="TableDateS.list"
          :tableHeader="tableHeader"
          :TableHeight="100"
          :outTableHeight="145"
          @currentRow="clicktogetdata"
          :isLoading="isLoading"
        />
        <div class="mt24 f12">
          <div>
            <span class="mr10">{{ $t(`Print.MaterialName`) }}</span
            ><el-input class="mr55" v-model="materialNameVal" placeholder="" size="small" clearable @change="" style="width: 331px"></el-input>
          </div>
        </div>
        <PageModule :PageData="{ total }" @pageChange="handleSizeChange" @pageSizeChange="handleCurrentChange" />
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import fileRequest from '@/utils/fileRequest'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'PackagingMaterialStorage'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted } from 'vue'
import { PackingMaterialsInOfStorage, FindDate } from '@/api/GeneralManager/Factoryinquiry/PackagingMaterialStorage'
import type { PackingMaterialsInOfStorageInterface, PackingMaterialsInOfS } from '@/api/GeneralManager/Factoryinquiry/PackagingMaterialStorage'

const isLoading = ref(true)

const PackingMaterialDeliveryData = async () => {
  isLoading.value = true
  const result = await PackingMaterialsInOfStorage(PackingMaterialOutOfWarehouseDataParameters.value)
  TableDateS.value.list = result.list
  TableDateS.value.qtyTotal = result.qtyTotal
  total.value = result.total
  summaryData.value[0].num = result.qtyTotal
  const { mtlName } = result.list[0] || {}
  materialNameVal.value = mtlName
  isLoading.value = false
}

const clicktogetdata = (row: any) => {
  const { mtlName } = row || {}
  materialNameVal.value = mtlName
}

const TableDateS = ref<PackingMaterialsInOfS>({
  qtyTotal: 0,
  list: []
})

const PackingMaterialOutOfWarehouseDataParameters = ref<PackingMaterialsInOfStorageInterface>({
  deptName: '',
  inStorageEndTime: '',
  inStorageStartTime: '',
  lotNo: '',
  mtlName: '',
  pageNum: 1,
  pageSize: 40,
  slipNo: '',
  slipReason: '',
  typeName: '',
  vendorName: ''
})

const GetDepartmentData = async () => {
  const result = await FindDate()
  let newArray = <any>[]
  result.vendor.forEach((item: any) => {
    newArray.push(item.VENDOR_NAME + ' ' + item.VENDOR_NO)
  })
  console.log(result.dept)
  formList.value[1].selectOptions = EvaluatesTheArrayReturnValue(result.slipReason)
  formList.value[3].selectOptions = EvaluatesTheArrayReturnValue(result.dept)
  formList.value[4].selectOptions = EvaluatesTheArrayReturnValue(newArray)
  formList.value[5].selectOptions = EvaluatesTheArrayReturnValue(result.types)
}

const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}

const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入入库单号',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectLabel: '',
    selectOptions: [],
    selectP: '入库原因'
  },
  {
    type: 'date',
    dateLabel: '入库日期',
    dateValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输部门',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectLabel: '',
    selectOptions: [],
    selectP: '厂商'
  },
  {
    type: 'select',
    selectValue: '',
    selectLabel: '',
    selectOptions: [],
    selectP: '包材类别'
  },
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  }
])

const tableHeader = ref([
  {
    label: '入库单号',
    prop: 'slipNo'
  },
  {
    label: '入库日期',
    prop: 'slipDate'
  },
  {
    label: '入库原因',
    prop: 'slipReason'
  },
  {
    label: '部门名称',
    prop: 'deptName'
  },
  {
    label: '厂商名称',
    prop: 'deptName'
  },
  {
    label: '指令',
    prop: 'lotNo'
  },
  {
    label: '包材类别',
    prop: 'typeName'
  },
  {
    label: '物料编号',
    prop: 'mtlNo'
  },
  {
    label: '材料颜色',
    prop: 'mtlColor'
  },
  {
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '数量',
    prop: 'qty'
  },
  {
    label: '仓管员',
    prop: 'chiName'
  },
  {
    label: '检核',
    prop: 'cfmFlag'
  }
])

// 统一调用接口
const interAceFunct = () => {
  // Find下拉框数据
  GetDepartmentData()
}

onMounted(() => {
  interAceFunct()
})

interface summaryDataType {
  index: number
  num: number | undefined
}

// 计算金额总数
const summaryData = ref<summaryDataType[]>([
  {
    index: 12,
    num: 0
  }
])

// 分页器
const total = ref()

const handleSizeChange = (val: number) => {
  PackingMaterialOutOfWarehouseDataParameters.value.pageNum = val
  PackingMaterialDeliveryData()
}

const handleCurrentChange = (val: number) => {
  PackingMaterialOutOfWarehouseDataParameters.value.pageSize = val
  PackingMaterialDeliveryData()
}

const materialNameVal = ref('')

const Launchform = (val: any) => {
  PackingMaterialOutOfWarehouseDataParameters.value.slipNo = val[0].inputValue
  PackingMaterialOutOfWarehouseDataParameters.value.slipReason = val[1].selectValue
  PackingMaterialOutOfWarehouseDataParameters.value.inStorageStartTime = val[2].dateValue[0]
  PackingMaterialOutOfWarehouseDataParameters.value.inStorageEndTime = val[2].dateValue[1]
  PackingMaterialOutOfWarehouseDataParameters.value.deptName = val[3].inputValue
  PackingMaterialOutOfWarehouseDataParameters.value.vendorName = val[4].selectValue.split(' ')[0]?.trim()
  PackingMaterialOutOfWarehouseDataParameters.value.typeName = val[5].selectValue
  PackingMaterialOutOfWarehouseDataParameters.value.lotNo = val[6].inputValue
  PackingMaterialOutOfWarehouseDataParameters.value.mtlName = val[7].inputValue

  PackingMaterialDeliveryData()
}

const findClicked = async (find: any) => {
  if (find === '置空') {
    clearFormList1()
  }
  if (find === '导出') {
    const res = await fileRequest.post<any, any>(`/pack/downloadPcPackIn`, PackingMaterialOutOfWarehouseDataParameters.value)
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    link.download = `包材入库查询导出${Date.now()}.xls` //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
}

const clearFormList1 = () => {
  formList.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    } else if (item.type === 'select') {
      item.selectValue = ''
    }
  })
}
</script>

<style lang="less" scoped>
h1 {
  font-size: 16px;
}
</style>
